<template>
  <div class="hello">
    <div class="top">
      <div class="center">
      <div>
      {{times}}&nbsp;&nbsp; 农历&nbsp;{{getLunarDay}}
      </div>
      <div class="youxiang">
     <ul>
     <li>
      <a href="https://mail.caas.cn/" target="_blank">邮箱登录</a> 
     </li>
     <li>|</li>
     <li>
      <a href="https://ifst.caas.cn/index.htm" target="_blank">农产品加工所</a>
     </li>
     <li>|</li>
     <li>
      <a href="">联系我们</a>
     </li>
     </ul>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import {getLunar} from "chinese-lunar-calendar"
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      times:"",
      getLunarDay:"",
      year:new Date().getFullYear(),
      month:new Date().getMonth()+1,
      date:new Date().getDate(),
    }
  },
  created(){ 
    this.getTime()
  },
  mounted(){
  this.getLunarDay=getLunar(this.year,this.month,this.date)
  let ss=this.getLunarDay.lunarYear+this.getLunarDay.dateStr;
  this.getLunarDay=ss
  console.log(this.getLunarDay);
  },
  methods:{
    getTime(){
      setInterval(this.getTimeInterval,0)
    },
    getTimeInterval:function(){
      let _this=this;
      let year=new Date().getFullYear();//获取年份
      let month=new Date().getMonth()+1;//获取月份
      let day=new Date().getDate();//获取天数
      let hours=new Date().getHours();//获取小时
      let minutes=new Date().getMinutes();//获取分
      let seconds=new Date().getSeconds();//获取秒
      if(hours<10){
        hours='0'+hours;
      }
      if(minutes<10){
        minutes="0"+minutes
      }
      if(seconds<10){
        seconds="0"+seconds
      }
      _this.times=year+"年"+month+"月"+day+"日    "+hours+":"+minutes+":"+seconds;
    }
  },
  beforDestroy(){
    if(this.times){
      clearInterval(this.getTimeInterval)
    }
  }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.center{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  width: 1200px;
  height:40px;
  margin: 0 auto;
  color: #fcffff;;
  overflow: hidden;

}
.hello{
  width:100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}
.top{
  height: 40px;
  background-color: rgb(145, 145, 145);
  overflow: hidden;
}
.youxiang a{
  list-style: none;
  color: #fcffff;;
  text-decoration: none;
  overflow: hidden;
  
}
.youxiang ul {
  list-style: none;
  overflow: hidden;
}
.youxiang ul li {
  display: block;
  float: left;
  margin-left: 15px;
  overflow: hidden;

}
</style>
